
<script>
	$(document).ready(function() {
		$( "#condEnd" ).hide();
		$( "#eStrtId" ).datepicker();
		
		
		function clickHandler() {
			var chkd = $( "#eEndChkId:checked" ).val();
			//alert("Checkbox is " + chkd);
			if (chkd) {
				// set the end date to the start date
				// user can select a new date...
				var startDate = $( "#eStrtId" ).val();
				alert("Date Found " + startDate);
				$( "#eEndId" ).text(startDate);
				$( "#eEndId" ).datepicker();
				$( "#condEnd" ).fadeIn(2000);
			} else {
				$( "#condEnd" ).fadeOut(1000);
			}
		}
		
		
		$( ":checkbox").click(clickHandler);
		
		
		
		//$( "select#selRoomId" ).click(function() {
		//$( "select#selRoomId" ).select(function() {
		//function() {
		
		function updateSelectOptionList(){
			$.ajax({
				url: "/ws/getRoomData",
				//dataType: 'json',
				success: function(jsonData){
					//alert("Got this " + jsonData)
					var options = '';
					var jd = $.parseJSON(jsonData)
					for (var i = 0; i < jd.length; i++) {
						options += '<option value="' + jd[i].rid + '">' + jd[i].rname + ' (' + jd[i].rsize + ')' + '</option>';
					}
					//alert("here are options " + options)
					$("select#selRoomId").html(options);
				}
			});
			$.ajax({
				url: "/ws/getUserData",
				//dataType: 'json',
				success: function(jsonData){
					//alert("Got this " + jsonData)
					var options = '';
					var jd = $.parseJSON(jsonData)
					for (var i = 0; i < jd.length; i++) {
						options += '<option value="' + jd[i].uid + '">' + jd[i].namelast + ', ' + jd[i].namefirst + '</option>';
					}
					//alert("here are options " + options)
					$("select#selUserId").html(options);
				}
			});
			
		}
			
		updateSelectOptionList();
		
		/*
		 * Refresh the select field each time the tab link is clicked. 
		 */
		$( "#tabl-1" ).click(updateSelectOptionList) 
		
		/*
		 * Perform form validation
		 */
    	$("#createEvent").validate();
  		
		
	});
	
	
</script>

<div id="schedDiv">
	<div id="errMsgDiv">
		<!-- Add Error Notifications Here -->
	</div>
	<div class="tabHead">Create New Meeting</div>
	
	<form action='/createEvent' method='post' name="createEventForm" id="createEvent">
	<div id="frmSched">
		<div id="formInput"> 
			<div>
				<label for="eventDesc">Event Name</label>
			</div>
			<div>
				<input name="eventDesc" type="text" maxlength="64" style="width:240px" class="required" minlength="2"/>
			</div>
		</div> 
		<div id="formInput"> 	
		<fieldset id="schedFs" style="width:220px">
		<legend>Start Time</legend>
			<div id="formInput"> 
				<div>
					<label for="eventStrt">Event Date: </label>
					<input name="eventStrt" id="eStrtId" type="text" maxlength="10" size="8"  style="width:100px" class="required date" />
					<div style="margin-top:1.5px">
					<label for="eventStrt">Time: </label>
					<select id="eStrtTimeHr" name="eventStrtTimeHr"  > 
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8" selected="selected" >8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
					<select id="eStrtTimeMin" name="eventStrtTimeMin"> 
						<option value="00" selected="selected" >0</option>
						<option value="15">15</option>
						<option value="30">30</option>
						<option value="45">45</option>
					</select>
					<select id="eStrtTimeMer" name="eventStrtTimeMer" > 
						<option value="a" selected="selected">AM</option>
						<option value="p">PM</option>
					</select>
					</div>
				</div>
			</div>
			<br>
			<div id="formInput"><b>Duration:</b> </div>	
			<div id="formInput">  
				<div>
					<label for="eventDurationHr">Hour(s) </label>
				</div>
				<div>	
					<select id="eDurHr" name="eventDurationHr"> 
						<option value="0"  >0</option>
						<option value="1" selected="selected" >1</option>
						<option value="2" >2</option>
						<option value="3" >3</option>
						<option value="4" >4</option>
						<option value="5" >5</option>
						<option value="6" >6</option>
						<option value="7" >7</option>
						<option value="8" >8</option>
					</select>
				</div>
			</div>	
			<div id="formInput">
				<div>
					<label for="eventDurationMin">Minutes </label>
				</div>
				<div>
					<select id="eDurMin" name="eventDurationMin">
						<option value="0" selected="selected" >00</option>
						<option value="15">15</option>
						<option value="30">30</option>
						<option value="45">45</option>
					</select>
				</div>
			</div>
		</fieldset>
		</div>
		
		
		<!-- uncomment for jquery endDate select   
		<div id="formInput"> 
			<div id="condEnd"> 
			<div style="width:240px">
				<label for="eventEndCheck">Set End Date:</label>
				<input name="eventEndCheck" id="eEndChkId" type="checkbox" value="isChecked" />
			</div>
			</div>
		</div>
		<div id="formInput"> 
			<div id="condEnd"> 
				<div>
					<label for="eventEnd">Event End</label>
				</div>
				<div>
					<input name="eventEnd" id="eEndId" type="text" maxlength="10" size="8" />
				</div>
			</div>
		</div>
		-->
		
		<div id="formInput"> 
			<div style="width:240px">
				<label for="eventRoom">Room</label>
			</div>
			<div>
				<select id="selRoomId" name="selRoom" style="width:220px" >
					<option value="NoValue" selected="selected" >Select Room</option>
				</select>
				
				
			</div>
		</div>
		<div id="formInput"> 
			<div>
				<label for="eventUser">Attendee(s)</label>
			</div>
			<div>
				<select id="selUserId" name="selUser" size="4" style="width:220px"  multiple="multiple" >
					<option value="NoValue" selected="selected" >Select Users</option>
				</select>
				
				
			</div>
		</div>
		<div id="clearDiv"></div>	
		<input name="" id="eSubmit" type="submit" value="Create Event" />
		<input name="reset" id="eReset" type="reset" value="Reset Fields" />
	</div>	
	
	
	
	
	</form>

</div>
